<!DOCTYPE html>
<html lang="en">

<head>
    <title>tab页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--插件  -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!--插件——动画  -->
    <link rel="stylesheet" href="css/animate.css">

    <!--插件——字体  -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!--自定义  -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <ol class="breadcrumb">
        <li>表格控件</li>
        <li class="active">tab页</li>
    </ol>
    <div class="content">
        <div class="row">
            <div class="col-sm-6">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
                    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
                    <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
                    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function() {
            $('.nav a').click(function(e) {
                e.preventDefault();
                var hr = $(this).attr('href');
                $(hr).addClass('animated fadeInRight');
            })
        });
    </script>
</body>

</html>